<template>
    <div class="home-list">
        <router-link :to="'/list/' + h.id">
        <img :src="h.author.avatar_url" alt="">
        <span class="loginname">{{h.author.loginname}}</span><br/>
        <span class="create-at">{{h.create_at | number}}</span><br/>
        <strong class="title">{{h.title}}</strong>
        <div class="xian"></div>
        <div class="buttom">
            <div class="visit">
                <i class="icon-eye-open"></i>
                {{h.visit_count}}
            </div>
            <div class="reply">
                <i class="icon-comment-alt"></i>
                {{h.reply_count}}
            </div>
            <div class="last">{{h.last_reply_at | number }}</div>
        </div>
        <div class="top" v-if="h.tab === 'share'">{{sha}}</div>
        <div class="top" v-else="h.tab === 'ask'">{{wenda}}</div>
        <div class="top" v-if="h.good">{{good}}</div>
        <div class="top" v-if="h.top">{{top}}</div>
        </router-link>
        </div>     
</template>
<script>
    export default {
        props: ["h"],
        data() {
            return {
                good: "精华",
                top: "置顶",
                sha: "分享",
                wenda: "问答"
            }
        }
    }
</script>
<style scoped>
    .xian {
        width: 95%;
        height: 1px;
        border-top: 1px solid #ccc;
        margin: .2rem auto;
    }
    
    .home-list {
        background: white;
        margin-top: 9px;
        position: relative;
        padding: .2rem 0 0 .3rem;
        font-size: .3rem;
        height: 100%;
    }
    
    .home-list img {
        width: 1rem;
        border: 1px solid #ccc;
        border-radius: 50%;
    }
    
    .loginname {
        position: absolute;
        top: .4rem;
        margin-left: .2rem;
    }
    
    .create-at {
        position: absolute;
        left: 1.3rem;
        top: 1rem;
        margin-left: .2rem;
    }
    
    .title {
        font-size: .4rem;
    }
    
    .buttom {
        display: flex;
        justify-content: space-around;
        color: #ccc;
        margin: .1rem 0;
        padding-left: .2rem;
    }
    
    .buttom div {
        height: .5rem;
    }
    
    .top {
        width: 2rem;
        height: 1rem;
        border: 2px solid purple;
        position: absolute;
        right: .5rem;
        top: .6rem;
        text-align: center;
        line-height: 1rem;
        border-radius: 5px;
    }
</style>